<!-- 企业详情 -->
<template>
  <view class="">
    <view class="main_title_bg">
      <view v-if="type==='1'" class="main_title_item">
        {{ companyNameList.companyName }}
      </view>
      <view v-else class="main_title_item">
        {{ name }}
      </view>
      <view class="hint_option">
        <span @tap="comparison">
          <text>对比</text>
          <image src="../static/company/goPage.png" mode=""></image>
        </span>
        <span @tap="isAttention(companyNameList.whetherAttention)">
          <text>{{
            companyNameList.whetherAttention == 0 ? "关注" : "已关注"
          }}</text>
          <image src="../static/company/goPage.png" mode=""></image>
        </span>
        <span @tap="clickClaim">
          <text>{{ whetherClaim }}</text>
          <image src="../static/company/goPage.png" mode=""></image>
        </span>
        <span @tap="toPatent">
          <text>专利缴费</text>
          <image src="../static/company/goPage.png" mode=""></image>
        </span>
      </view>
      <view class="main_info">
        <view class="person">
          <span>法定代表人:{{ companyNameList.companyLegalPerson }}</span>
          <span>成立时间:{{ companyNameList.companyEstablished }}</span>
        </view>
        <view class="person">
          <span>联系方式:{{ companyNameList.companyPhoneNumber || '--' }}</span>
          <span v-show="companyNameList.companyPhoneNumber && showPhone" @click="getPhone" style="color:#1678ff">查看</span>
        </view>
        <view class="skill">
          所属行业:{{ companyNameList.companyField || "--" }}
        </view>
      </view>
      <view class="main_address">
        地址:{{ companyNameList.companyAddress }}
      </view>
    </view>
    <view class="main_centent_option">
      <view class="item" @tap="jumpPage(1)">
        <view class="item_bg">
          <image src="../static/detaile/item01.png" mode=""></image>
          <text>{{ companyNameList.companyHonorTotal }}</text>
        </view>
        <span class="text">荣誉</span>
      </view>
      <view class="item" @tap="jumpPage(2)">
        <view class="item_bg">
          <image src="../static/detaile/item02.png" mode=""></image>
          <text>{{ companyNameList.companyPatentTotal }}</text>
        </view>
        <span class="text">专利</span>
      </view>
      <view class="item" @tap="jumpPage(3)">
        <view class="item_bg">
          <image src="../static/detaile/item03.png" mode=""></image>
          <text>{{ companyNameList.companyTrademarkTotal }}</text>
        </view>
        <span class="text">商标</span>
      </view>
      <view class="item" @tap="jumpPage(4)">
        <view class="item_bg">
          <image src="../static/detaile/item04.png" mode=""></image>
          <text>{{ companyNameList.companySoftTotal }}</text>
        </view>
        <span class="text">软著</span>
      </view>
    </view>

    <!-- 登录框 -->
    <van-overlay
      type="primary"
      v-show="visible"
      :close-on-click-overlay="false"
    >
      <promptDialogBox
        :content="urlImage"
        :msg="msg"
        :affirm="btnText"
        @closeShow="handleClose"
        @controlShow="hanldClick"
      />
    </van-overlay>
  </view>
</template>

<script>
import promptDialogBox from "../components/promptDialogBox.vue";
export default {
  props: ["companyNameList", "optionId","name","type","showPhone"],
  components: {
    promptDialogBox,
  },
  data() {
    //这里存放数据
    return {
      isTop: true,
      visible: false, // 是否显示登录框
      msg: "", // 提示信息内容
      urlImage: "", // 提示的图片
      btnText: "", // 按钮文字
    }
  },
  computed: {
    whetherClaim() {
      if (this.companyNameList.whetherClaim == 0) {
        return "认领";
      } else if (this.companyNameList.whetherClaim == 1) {
        return "认领审核中";
      } else if (this.companyNameList.whetherClaim == 2) {
        return "已认领";
      }
    },
  },
  methods: {
    // 查看电话
    getPhone() {
      this.msg = "请先登录后,再操作"
      this.urlImage = "/static/home/noLogin.png"
      this.btnText = "立即登录"
      this.visible = true
    },
    jumpPage(val) {
      this.$emit("isShow", val);
    },
    isAttention(val) {
      if (val == 0) {
        this.$post(
          "/bmj-api/api/cms/cmsCompany/attentionCompany?id=" + this.optionId
        ).then((res) => {
          // console.log("关注", res);
          if (res.code == 10001) {
            // 登录失效
            this.msg = "请先登录后,再操作";
            this.urlImage = "/static/home/noLogin.png";
            this.btnText = "立即登录";
            this.visible = true;
          } else if (res.code == 10004) {
            this.msg = "您的关注数量已满,升级会员解锁更多";
            this.urlImage = "/static/home/attention.png";
            this.btnText = "升级会员";
            this.visible = true;
          } else if (res.code == 200) {
            uni.showToast({
              title: "关注成功",
              duration: 2000,
              icon: "none",
            });
            this.companyNameList.whetherAttention = 1;
          }
        });
      } else if (val == 1) {
        this.$post(
          "/bmj-api/api/cms/cmsCompany/cancelAttentionCompany?id=" +
            this.optionId
        ).then((res) => {
          // console.log("取消关注", res);
          if (res.code == 200) {
            uni.showToast({
              title: "取消关注成功",
              duration: 2000,
              icon: "none",
            });
            this.companyNameList.whetherAttention = 0;
          }
        });
      }
    },
    // 点击企业认领
    clickClaim() {
      uni.navigateTo({
        url:
          "/pages/enterpriseDetails/enterpriseClaim?title=" +
          this.companyNameList.companyName +
          "&id=" +
          this.optionId,
      });
    },
    // 专利缴费
    toPatent() {
      let token = this.$getToken();
      if (!token) {
        uni.showToast({
          title: "您还没有登录，请登录后操作",
          duration: 2000,
          icon: "none",
        })
        setTimeout(()=>{    
          uni.setStorageSync("pageUrl", window.location.href);   
          uni.navigateTo({
            url: "/pages/login/index",
          })
        },2000)  
      } else {
        uni.navigateTo({
          url: `/pages/patent/patentList/Index?id=${this.optionId}&name=${this.companyNameList.companyName}`
        })
      }  
    },
    handleClose() {
      this.visible = false;
    },
    hanldClick(val) {
      uni.setStorageSync("pageUrl", window.location.href);
      uni.navigateTo({
        url: "/pages/login/index",
      });
      this.visible = false;
    },
    // 点击企业对比
    comparison() {
      uni.navigateTo({
        url:
          "/pages/compare/index?id=" +
          this.optionId +
          "&companyName=" +
          this.companyNameList.companyName,
      });
    },
  }
};
</script>
<style lang="less" scoped>
.main_title_bg {
  background-image: url(https://dm-bmj.oss-cn-guangzhou.aliyuncs.com/static/detail_bg.png);
  height: 460rpx;
  padding: 40rpx 30rpx 0;
  background-size: cover;
  .main_title_item {
    display: flex;
    align-items: center;
    height: 120rpx;
    // margin:40rpx 0;
    color: #fff;
    font-size: 36rpx;
    font-weight: 700;
  }
  .hint_option {
    height: 80rpx;
    // margin-top:10rpx;
    display: flex;
    align-items: center;
    span {
      border: 1rpx solid #87a5d8;
      padding: 7rpx 20rpx;
      margin-right: 20rpx;
      border-radius: 10rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      text {
        font-size: 20rpx;
        margin-right: 15rpx;
        color: #fff;
      }
      image {
        width: 7rpx;
        height: 15rpx;
      }
    }
  }
  .main_info {
    font-size: 24rpx;
    .person {
      color: #fff;
      margin-bottom: 20rpx;
      span {
        margin-right: 40rpx;
      }
    }
    .skill {
      color: #fff;
      // margin-top: 20rpx;
    }
  }
  .main_address {
    margin-top: 20rpx;
    color: #9fc2f1;
    font-size: 22rpx;
  }
}
.main_centent_option {
  display: flex;
  justify-content: space-around;
  align-items: center;

  .item {
    display: flex;
    flex-direction: column;
    height: 200rpx;
    justify-content: center;
    align-items: center;
    &:nth-child(even) .item_bg {
      background: linear-gradient(to bottom, #25b3c9, #2adab6);
    }
    .item_bg {
      position: relative;
      width: 106rpx;
      height: 80rpx;
      background: linear-gradient(to bottom, #6174ff, #44a2ff);

      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 35rpx 35rpx 35rpx 35rpx;
      text {
        position: absolute;
        right: -6rpx;
        top: -10rpx;
        background-color: red;
        color: #fff;
        font-size: 17rpx;
        padding: 2rpx 10rpx;
        border-radius: 40rpx;
      }
      image {
        width: 42rpx;
        height: 42rpx;
        display: flex;
        align-items: center;
      }
    }
    .text {
      margin-top: 15rpx;
      font-size: 24rpx;
      color: #333;
    }
  }
}
.itemNum {
  padding: 0 30rpx;
  display: flex;
  flex-wrap: wrap;
  span {
    background-color: #fff6ef;
    padding: 8rpx 28rpx;
    margin-right: 15rpx;
    margin-top: 15rpx;
    border-radius: 20rpx;
    color: #ff7648;
    font-size: 24rpx;
  }
}
</style>
